<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="module" src="../src/js/dialog.js"></script>
</head>

<body>
    <button class='firstBtn'>open first</button>
    <button class='secondBtn'>open second</button>
    <button class='thirdBtn'>open third</button>
</body>
<script>
    document.querySelector('.firstBtn').addEventListener('click', e => Jsc.showDialog({
        title: 'First Test',
        url: './template/dialogFirst.html'
    }));

    document.querySelector('.secondBtn').addEventListener('click', e => Jsc.showDialog({
        title: 'Second Test',
        url: './template/dialogSecond.html',
        closeWhenClickedOutside: true
    }));

    document.querySelector('.thirdBtn').addEventListener('click', e => Jsc.showDialog({
        title: 'Second Test',
        url: './template/dialogSecond.html',
        width: '60%',
        height: '60%',
        position: {
            top: '20%',
            left:'35%'
        },
        closeWhenClickedOutside: true
    }));
</script>

</html>